<template>
	<view class="page">
		<view class="form-content">
			<u-form :model="formData" ref="uForm" class="uForm" label-position="top">
				<u-form-item prop="attachmentDescription" :label="formData.attachmentName" label-width="auto">
					<u-input type="textarea" v-model="formData.attachmentDescription" placeholder="请输入内容" />
				</u-form-item>
				<u-form-item prop="images" label="附件信息" label-width="auto">
					<JNPFUpload v-model="attendanceFileList" :value="attendanceFileList" :fileSize='2' :limit='10'
						:showLabel="false" @uploading="uploading">
					</JNPFUpload>
				</u-form-item>
			</u-form>
		</view>
		<view class="save-bottom">
			<view class="fixed-btn save-padding">
				<u-button type="primary" :disabled="btnDisabled" shape="circle" @click="onSubmit">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	const apiUrl = "/api/Jiushi/Customerattachment";
	export default {
		data() {
			return {
				showChildrenForm: false,
				disabled: false,
				dataList: [],
				formData: {
					customerId: '',
					businessId: '',
					attachmentType: '',
					attachmentName: '',
					attachmentDescription: "",
					attachmentPath: ""
				},
				attendanceFileList: [],
				btnDisabled: false,
				rules: {
					attachmentDescription: [{
						required: true,
						message: `请输入内容`,
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.id) {
				this.getFormData(options.id)
			} else {
				this.formData.customerId = options.cid
				this.formData.businessId = options.bid
				this.formData.attachmentName = options.title
				this.formData.attachmentType = options.type
			}
			uni.setNavigationBarTitle({
				title: options.title
			})
		},
		methods: {
			uploading(flag) {
				this.btnDisabled = flag
			},
			getFormData(id) {
				let that = this
				that.$helper.ajax({
					url: `${apiUrl}/${id}`,
					method: "GET",
					contentType: "application/json",
					success: res => {
						if (res.data.data) {
							that.formData = res.data.data
							if (that.formData.attachmentPath) {
								that.attendanceFileList = that.formData.attachmentPath.split(',').map(item => {
									let tempItem = {
										url: item
									}
									return tempItem
								})
							}
							that.showChildrenForm = true
						}
					}
				});
			},
			/* 表单提交 */
			onSubmit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.formData.attachmentPath = this.attendanceFileList.map(item => {
							return item.url
						}).join(',')
						let url = apiUrl;
						let method = "POST";
						if (this.formData.id) {
							url = url + "/" + this.formData.id;
							method = "PUT";
						}
						this.$helper.ajax({
							url: url,
							method: method,
							contentType: "application/json",
							data: this.formData,
							success: res => {
								this.formData
								this.$helper.msg('保存成功', 'success');
								setTimeout(() => {
									uni.setStorage({
										key: "refreshPage",
										data: true
									})
									uni.navigateBack();
								}, 2000)
							}
						});
					}
				});
			},
		},
	}
</script>
<style lang="scss" scoped>
	.pop-box {
		padding: 24rpx;

		.pop-title {
			width: 80%;
			font-size: 36rpx;
			text-align: left;
			line-height: 60rpx;
		}
	}
</style>